<template>
  <div class="myQuizz">
    <div class="quizz-container">
      <div v-for="paper of paperList" :key="paper.id">
        <div class="quizz" @click="goDetail(paper.id)">
          <p class="title">{{paper.title}}<span class="date desc">{{paper.date}}</span></p>
          <p class="desc">我的分数: {{paper.score}}</p>
        </div>
      </div>
    </div>
    <footer>
      <Pages
        @setCurPage="setCurPage"
        :curPage="curPage"
        :total="total"
        :pageSize="pageSize"></Pages>
    </footer>
  </div>
</template>
<script>
import Pages from '@/components/Pages/index';
import api from '@/api/myQuizz'
  ;

export default {
  name: 'myQuizz',
  data() {
    return {
      paperList: [],
      curPage: 1,
      total: 100,
      pageSize: 6,
    };
  },
  methods: {
    goDetail(id) {
      this.$router.push({ name: 'QuizzDetail', query: { paperId: id } });
    },
    setCurPage(page) {
      this.curPage = page;
      this.queryBPaperByPagination();
    },
    queryBPaperByPagination() {
      const params = new URLSearchParams();
      params.append('userId', sessionStorage.getItem('userId'));
      params.append('rows', this.pageSize);
      params.append('page', this.curPage);
      api.queryBPaperByPagination(params).then(async (response) => {
        this.paperList = [];
        const datas = response.data.rows;
        this.total = response.data.total;
        for (let i = 0; i < datas.length; i += 1) {
          this.paperList.push(
            {
              id: datas[i].paperId,
              title: datas[i].paperTitle,
              score: datas[i].score,
              date: datas[i].createDate,
            },
          );
        }
      });
    },
  },
  mounted() {
    this.$emit('route-switch', window.location.href.split('/').pop());
    this.queryBPaperByPagination();
  },
  components: {
    Pages,
  },
};
</script>
<style lang="less">
.myQuizz {
  padding: 20px 10px;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 3px 6px rgba(6,0,1,.05);
  .quizz-container {
    width: 100%;
    .quizz {
      width: 100%;
      box-sizing: border-box;
      background: #F7FAFF;
      padding: 20px;
      margin-bottom: 10px;
      cursor: pointer;
      &:hover {
        transition: all .3s ease;
        box-shadow: 0 3px 6px rgba(6, 0, 1, 0.082);
      }
      .title {
        margin-bottom: 5px;
        .date {
          float: right;
          background: #F7FAFF;
        }
      }
    }
  }
  .desc {
    color: rgb(153, 153, 153);
    font-size: 12px;
  }
  &>footer {
    background: #fff;
    text-align: center;
    padding: 10px;
  }
}
</style>
